Getting Started
Creating a New Widget
You can scaffold a web widget in two ways:
| Approach | Command | Best for |
|---|---|---|
| Offline starter | pnpm exec nx generate @cdx-extensions/widget-template-web:widget <widget-name> | Blank Module Federation remote with no catalog |
| Catalog templates | pnpm exec nx run generate-web-widget | DI-backed starters from the extension template catalog |
Both create a new app under widgets/web/ with the required Module Federation configuration. Only modify files inside src/app/ for your widget logic and UI.
For catalog-driven generation (category picker and npm template overlays), see Extension Template Catalog. Quick reference:
pnpm exec nx run generate-web-extensions # interactive: type → category → template → name
pnpm exec nx run generate-web-widget # interactive: widget only
pnpm exec nx run generate-web-widget -- --template=agent --name=test-widget
In cdx-extensibility-apps, prefix Nx with pnpm exec. Build a named widget with pnpm run build -- agent-widget (package.json script — not pnpm exec). Do not run a bare pnpm run build at the repo root. See pnpm run vs pnpm exec.
Prerequisites
Before you run either generator, complete the prerequisites and environment setup described in the CDX Extensibility Apps README. That reference repo uses pnpm (corepack enable, then pnpm run setup). Prefix Nx with pnpm exec. If corepack enable fails, see Troubleshooting. For when to use pnpm run vs pnpm exec, see pnpm run vs pnpm exec.
| File / Folder | Can you edit? | Notes |
|---|---|---|
src/app/ | Yes | All your widget UI and business logic goes here |
src/environments/ | Yes | Set apiUrl and feature flags per environment |
src/assets/ | Yes | Add images, fonts, static files |
module-federation.config.ts | Partially | Only change name and exposes |
project.json | Partially | Only change port under serve / serve-static |
webpack.config.ts | No | Required for Module Federation — any change breaks loading in OLB |
bootstrap.tsx / main.ts | No | Required async boundary for Module Federation |
tsconfig*.json / jest.config.ts | No | Required for build and test tooling |
Next Steps
Web development guides:
- SDK Reference — SDK packages, methods, and usage
- Extension Template Catalog — Scaffold from DI template catalog
- Platform Capabilities (Local) — How local development works with mock data
- OLB Integration — Module Federation, registration, and deployment